<template>
  <div>
    <el-container>
      <!--      距离图-->
      <el-aside width="700px">
        <div className="home">
          <div id="container" style="width:100%;height:1300px"/>
        </div>
      </el-aside>

      <!--      主体-->
      <el-main>
        <!--        搜索-->
        <el-form ref="form" :model="order" label-width="100px">

          <el-form-item label="寄件点:">
            <el-form>
              <el-form-item label="寄件人姓名:">
                <el-input v-model="order.order.senderName" disabled="disabled" placeholder="寄件人姓名"/>
              </el-form-item>
              <el-form-item label="寄件人电话:">
                <el-input v-model="order.order.senderPhone" :disabled="true" placeholder="寄件人电话"/>
              </el-form-item>
              <el-form-item label="寄件人地址:">
                <area-cascader disabled="disabled" type="code" v-model="sendAddress2" :level="1" :data="pcaa"
                ></area-cascader>
              </el-form-item>
              <el-form-item label="寄件人详细地址:">
                <el-input v-model="order.order.senderAddress" id="tipinput" placeholder="寄件人详细地址"/>
              </el-form-item>
              <el-form-item label="您的寄件网点:">
                <el-select v-model="order.orderLocation.sendAgentId" value-key="id"
                           @change="showTheRangeOfShippingOutlets" placeholder="请选择"
                >
                  <el-option label="请选择" value=""/>
                  <el-option v-for="(item,index) in shippingOutlets" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
            <el-button type="primary" icon="el-icon-edit" circle @click="showAddressBookInfoByUserId(0)">地址簿</el-button>
          </el-form-item>

          <el-form-item label="收件点:">
            <el-form>
              <el-form-item label="收件人姓名:">
                <el-input v-model="order.order.receiverName" disabled="disabled" placeholder="收件人姓名"/>
              </el-form-item>
              <el-form-item label="收件人电话:">
                <el-input v-model="order.order.receiverPhone" :disabled="true" placeholder="收件人电话"/>
              </el-form-item>
              <el-form-item label="收件人地址:">
                <area-cascader disabled="disabled" type="code" v-model="receiveAddress" :level="1" :data="pcaa"
                ></area-cascader>

              </el-form-item>

              <el-form-item label="收件人详细地址:">
                <el-input v-model="order.order.receiverAddress" id="tipinput2" placeholder="收件人详细地址"/>

              </el-form-item>

              <el-form-item label="您的收件网点:">
                <el-select v-model="order.orderLocation.receiveAgentId" value-key="id"
                           @change="showTheRangeOfReceivingOutlets" placeholder="请选择"
                >
                  <el-option label="请选择" value=""/>
                  <el-option v-for="(item,index) in receivingPoint" :label="item.name" :value="item.id" :key="index"/>
                </el-select>
              </el-form-item>
            </el-form>
            <el-button type="primary" icon="el-icon-edit" circle @click="showAddressBookInfoByUserId(1)">地址簿</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="generateDistanceMap">生成距离图</el-button>

          </el-form-item>

          <el-form-item label="预计到达时间:">
            <el-date-picker
              v-model="order.order.estimatedArrivalTime"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>

          <el-form-item label="货物信息:">
            <el-button icon="el-icon-edit" type="primary" @click="getGoodsType">填写货物信息</el-button>
          </el-form-item>

          <el-form-item label="距离:">
            <span style="color: red"><b>{{ order.order.distance }}公里</b></span>
          </el-form-item>
          <el-form-item label="订单类型:">
            <el-radio v-model="order.order.orderType" label="1" border>同城订单</el-radio>
            <el-radio v-model="order.order.orderType" label="2" border>城际订单</el-radio>
          </el-form-item>

          <el-form-item label="取件类型:">
            <el-radio v-model="order.order.pickupType" label="1" border>网点自寄</el-radio>
            <el-radio v-model="order.order.pickupType" label="2" border>上门取件</el-radio>
          </el-form-item>

          <el-form-item label="付款方式:">
            <el-radio v-model="order.order.paymentMethod" label="1" border>预结</el-radio>
            <el-radio v-model="order.order.paymentMethod" label="2" border>到付</el-radio>
          </el-form-item>

          <el-form-item>
            <router-link :to="'/order/index'">
              <el-button type="info">取消</el-button>
            </router-link>

            <el-button type="primary" @click="addOrder">添加</el-button>
          </el-form-item>
        </el-form>

        <!-- 用户对应的地址簿信息 -->

        <el-dialog title="地址簿信息" :visible.sync="dialogFormVisible">
          <div slot="footer" class="dialog-footer">
            <!-- 表格 -->
            <el-table :data="addressByUserIdData.records" style="width: 100%">
              <el-table-column label="姓名" prop="name" fixed="left"/>
              <el-table-column label="电话号" prop="phoneNumber" width="160"/>
              <el-table-column label="分机号" prop="extensionNumber"/>
              <el-table-column label="所属地址" width="180">
                <template slot-scope="scope">
                  <p
                    v-model="sendAddress[0]=scope.row.provinceId,sendAddress[1]=scope.row.cityId,sendAddress[2]=scope.row.countyId"
                  ></p>
                  <area-cascader disabled="disabled" type="code" v-model="sendAddress" :level="1" :data="pcaa"
                  ></area-cascader>
                </template>
              </el-table-column>
              <el-table-column label="详细地址" prop="address" width="220"/>
              <el-table-column label="公司名称" prop="companyName" width="220"/>
              <el-table-column label="是否为默认地址" width="140">
                <template slot-scope="scope">
                  <p v-if="scope.row.isDefault == true">
                    <b>是</b>
                  </p>
                  <p v-else-if="scope.row.isDefault == false">否</p>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" prop="createTime" width="160"/>
              <el-table-column label="操作" fixed="right" width="160">
                <template #default="scope">
                  <el-button type="primary" icon="el-icon-edit" @click="chooseAddressBook(scope.$index,scope.row)">
                    作为寄件地址
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-button
              @click="(dialogFormVisible = false), (addressByUserIdData = {})"
            >取 消
            </el-button>
            <el-button
              type="primary"
              @click="(dialogFormVisible = false), (addressByUserIdData = {})"
            >确 定
            </el-button>
          </div>
        </el-dialog>

        <!--        货物总量信息填写-->
        <el-dialog title="货物重量信息:" :visible.sync="orderLocationFlag" :before-close="closeOrderCargoFlag">
          <el-form ref="form" :model="order" label-width="100px">
            <el-form-item label="货物名称:">
              <el-input v-model="order.orderCargo.name" placeholder="请你输入货物名称"/>
            </el-form-item>
            <el-form-item label="货物类型">
              <el-select v-model="order.orderCargo.goodsTypeId" placeholder="货物类型">
                <el-option v-for="(item,index) in goodsType" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="货物单位:">
              <el-input v-model="order.orderCargo.unit" placeholder="请你输入货物单位"/>
            </el-form-item>
            <el-form-item label="货品货值:">
              <el-input v-model="order.orderCargo.cargoValue" type="number" placeholder="请你输入货品货值"/>
            </el-form-item>

            <el-form-item label="货品条码:">
              <el-input v-model="order.orderCargo.cargoBarcode " placeholder="请你输入货品条码"/>
            </el-form-item>

            <el-form-item label="货品体积:">
              <el-input v-model="order.orderCargo.volume" type="number" placeholder="请您输入货物体积"/>
            </el-form-item>

            <el-form-item label="货品备注:">

              <el-input v-model="order.orderCargo.remark" type="textarea" placeholder="请您输入备注"/>
            </el-form-item>
            <el-form-item label="货品数量:">
              <el-input-number
                v-model="order.orderCargo.quantity"
                :min="1"
                :max="100"
                label="货品数量"
                @change="handleChangeQuantity"
              />
            </el-form-item>

            <el-form-item label="货品重量:">
              <el-input-number
                v-model="order.orderCargo.weight"
                :min="1"
                :max="100"
                label="货品重量"
                @change="handleChangeWeight"
              />
            </el-form-item>

            <el-form-item label="货品总体积:">
              <el-input v-model="order.orderCargo.totalVolume" :disabled="true" placeholder="货物总体积"/>
            </el-form-item>

            <el-form-item label="货品总重量:">
              <el-input v-model="order.orderCargo.totalWeight" :disabled="true" placeholder="货物总重量"/>
            </el-form-item>

            <el-form-item>
              <el-button @click="closeOrderCargoFlag">取消</el-button>
              <el-button type="primary" @click="orderLocationFlag=false">添加</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-main>
    </el-container>
  </div>

</template>

<script>
import AMap from 'AMap'
import distpicker from 'v-distpicker'
import order from '@/api/order/order'
import { pca, pcaa } from 'area-data'
import coreOrg from '@/api/base/coreOrg/index'

export default {
  name: 'Home',
  components: {
    distpicker
  },
  data() {
    return {
      pca: pca,
      pcaa: pcaa,
      //寄件地址
      sendAddress: [],
      //显示在页面上
      sendAddress2: [],
      //收件地址
      receiveAddress: [],
      /**
       *货物重量信息页面开关
       */
      orderLocationFlag: false,
      /**
       * 区别是发送地址还是接收地址
       */
      flag: 0,
      /**
       * 地址簿页面开关
       */
      dialogFormVisible: false,
      /**
       * 地址簿查询页面数量大小
       */
      addressPageSize: 1000,
      /**
       * 地址簿查询当前页码
       */
      addressPageNum: 0,
      // 地址簿查询对象
      addressDataQuery: {
        name: '',
        userId: ''
      },
      addressByUserIdData: {},
      formInline: {
        user: '',
        region: ''
      },
      order: {
        order: {
          orderType: '', // 订单类型，1为同城订单，2为城际订单
          pickupType: '', // 取件类型，1为网点自寄，2为上门取件
          memberId: '', // 客户id
          receiverProvinceId: '', // 收件人省份id
          receiverCityId: '', // 收件人城市id
          receiverCountyId: '', // 收件人区县id
          receiverAddress: '', // 收件人详细地址
          receiverAddressId: '', // 收件人地址id
          receiverName: '', // 收件人姓名
          receiverPhone: '', // 收件人电话
          senderProvinceId: '', // 发件人省份id
          senderCityId: '', // 发件人城市id
          senderCountyId: '', // 发件人区县id
          senderAddress: '', // 发件人详细地址
          senderAddressId: '', // 发件人地址id
          senderName: '', // 发件人姓名
          senderPhone: '', // 发件人电话
          currentAgencyId: '', // 订单当前所属网点
          paymentMethod: '', // 付款方式,1.预结2到付
          paymentStatus: '', // 付款状态,1.未付2已付
          estimatedArrivalTime: '', // 预计到达时间
          distance: ''// 距离，单位：公里
        },
        orderCargo: {
          name: '', // 货物名称
          unit: '', // 货物单位
          cargoValue: '', // 货品货值
          cargoBarcode: '', // 货品条码
          quantity: 1, // 货品数量
          volume: '', // 货品体积
          weight: 1, // 货品重量
          remark: '', // 货品备注
          totalVolume: '', // 货品总体积
          totalWeight: '', // 货品总重量,
          goodsTypeId: ''// 货物类型
        },
        orderLocation: {
          sendLocation: '', // 发送地址坐标
          receiveLocation: '', // 收货地址坐标
          sendAgentId: '', // 发送起始网点计算结果
          receiveAgentId: ''// 接受终止网点的计算结果
        },
        begin: '',
        end: ''
      },
      senAddressLabel: {
        province: '',
        city: '',
        county: ''
      },
      receiverAddressLabel: {
        province: '',
        city: '',
        county: ''
      },
      map: null, // 地图
      infowindowL: null, // 信息窗体
      m1: null, // 生成距离标记 起点
      m2: null, // 生成距离标记 终点
      line: null, // 显示的距离线
      text: null, // 显示的距离{{}}千米
      auto: null, // 提示
      autocomplete: null, // 搜索提示 起点
      placeSearch: null, // 搜索显示所有的标签 起点
      beginAddress: '',
      lat: '', // 纬度 起点
      lng: '', // 经度 起点
      lat2: '', // 纬度 终点
      lng2: '', // 纬度 终点
      autocomplete2: null, // 搜索提示 终点
      placeSearch2: null,// 搜索显示所有的标签 终点
      goodsType: [],//货物类型,
      shippingOutlets: [],//寄件网点
      receivingPoint: [],//收件网点
      //寄件机构作业范围
      sendCoreOrgPath: [],
      //收件机构作业范围
      receiveCoreOrgPath: [],
      //多边形对象
      sendPolygon: null,
      receivePolygon: null
    }
  },
  mounted() {
    this.init()
    this.getAgentAll()
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      this.addressDataQuery.userId = this.$route.params.id
      this.order.order.memberId = this.$route.params.id
    }
  },
  methods: {
    showTheRangeOfShippingOutlets(val) {
      coreOrg.findAllAgencyScope(val).then(data => {
        let coreOrgScopeData=data.data[0];
        this.$nextTick(() => {
          /**
           * 显示地图
           */
          this.init()
          /**
           *机构作业范围
           */
          let coreOrgScope = coreOrgScopeData.mutiPoints
          for (let i = 0; i < coreOrgScope.length; i++) {
            let lng = coreOrgScope[i].lng
            let lat = coreOrgScope[i].lat
            let a = [lng, lat]
            this.sendCoreOrgPath.push(a)
          }
          this.sendPolygon = new AMap.Polygon({
            path: this.sendCoreOrgPath,
            strokeColor: '#FF33FF', //线颜色
            strokeOpacity: 0.2, //线透明度
            strokeWeight: 3,    //线宽
            fillColor: '#1791fc', //填充色
            fillOpacity: 0.35//填充透明度
          })
          this.sendPolygon.setMap(this.map)
        })
      })
    },
    showTheRangeOfReceivingOutlets(val) {
      coreOrg.findAllAgencyScope(val).then(data => {
        let coreOrgScopeData=data.data[0];
        this.$nextTick(() => {
          /**
           * 显示地图
           */
          this.init()
          /**
           *机构作业范围
           */
          let coreOrgScope = coreOrgScopeData.mutiPoints
          for (let i = 0; i < coreOrgScope.length; i++) {
            let lng = coreOrgScope[i].lng
            let lat = coreOrgScope[i].lat
            let a = [lng, lat]
            this.receiveCoreOrgPath.push(a)
          }
          this.receivePolygon = new AMap.Polygon({
            path: this.receiveCoreOrgPath,
            strokeColor: '#FF33FF', //线颜色
            strokeOpacity: 0.2, //线透明度
            strokeWeight: 3,    //线宽
            fillColor: '#1791fc', //填充色
            fillOpacity: 0.35//填充透明度
          })
          this.receivePolygon.setMap(this.map)
        })
      })
    },
    //获取所有网点
    getAgentAll() {
      coreOrg.queryAll().then(data => {
        this.shippingOutlets = data.data
        this.receivingPoint = data.data
      })
    },

    getGoodsType() {

      order.getGoodsType().then(data => {
        this.goodsType = data.data
      })
      this.orderLocationFlag = true
    },
    // 时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
    dateFormat: function(time) {
      var date = new Date(time)
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
    },
    addOrder() {
      this.order.order.estimatedArrivalTime = this.dateFormat(this.order.order.estimatedArrivalTime)
      this.order.begin = this.lng + ',' + this.lat
      this.order.end = this.lng2 + ',' + this.lat2
      this.order.order.currentAgencyId = this.order.orderLocation.sendAgentId
      order.saveOrder(this.order).then(data => {
        console.log('data:', data)
        this.$message({
          type: data.code == 2000 ? 'success' : 'error',
          message: data.data,
          showClose: true
        })
        this.$router.push({ path: '/order/orderInfo' })
      })
    },
    // 关闭货物重量 信息页面
    closeOrderCargoFlag() {
      this.order.orderCargo = {}
      this.order.orderCargo.weight = 1
      this.order.orderCargo.quantity = 1
      this.orderLocationFlag = false
    },
    // 计算货物总重量
    handleChangeWeight(value) {
      this.order.orderCargo.totalWeight = value * this.order.orderCargo.quantity
    },
    // 计算货物体积
    handleChangeQuantity(value) {
      this.order.orderCargo.totalVolume = value * this.order.orderCargo.volume
      this.order.orderCargo.totalWeight = value * this.order.orderCargo.weight
    },
    /**
     *选择地址簿
     */
    chooseAddressBook(index, row) {
      if (this.flag === 0 || this.flag == '0') {
        this.sendAddress2.push(row.provinceId)
        this.sendAddress2.push(row.cityId)
        this.sendAddress2.push(row.countyId)
        /**
         * 寄件地址
         */
        this.order.order.senderAddress = row.address
        this.order.order.senderProvinceId = row.provinceId
        this.order.order.senderCityId = row.cityId
        this.order.order.senderCountyId = row.countyId
        this.order.order.senderPhone = row.phoneNumber
        this.order.order.senderName = row.name
        this.order.order.senderAddressId = row.id
        //TODO
      } else if (this.flag === 1 || this.flag == '1') {
        this.receiveAddress.push(row.provinceId)
        this.receiveAddress.push(row.cityId)
        this.receiveAddress.push(row.countyId)
        /**
         * 收件地址
         */
        this.order.order.receiverAddress = row.address
        this.order.order.receiverProvinceId = row.provinceId
        this.order.order.receiverCityId = row.cityId
        this.order.order.receiverCountyId = row.countyId
        this.order.order.receiverPhone = row.phoneNumber
        this.order.order.receiverName = row.name
        this.order.order.receiverAddressId = row.id
      }
      this.addressByUserIdData = {}
      this.dialogFormVisible = false
    },
    /**
     * 根据用户id获取地址簿信息
     * */
    showAddressBookInfoByUserId(i) {
      this.flag = i
      this.dialogFormVisible = true
      order
        .queryAddressBookBasedOnUserId(
          this.addressDataQuery,
          this.addressPageSize,
          this.addressPageNum
        )
        .then((data) => {
          this.addressByUserIdData = data.data
        })
    },
    /** *
     *地址信息
     */
    selected(data) {
      this.addressByUserIdData.province = data.province.value
      this.addressByUserIdData.city = data.city.value
      this.addressByUserIdData.county = data.area.value
    },
    /**
     * 生成距离图,每次点击便会将地图删除,重新设置
     */
    generateDistanceMap() {
      /**
       *非空判断
       */
      if (this.lat == null || this.lat == '') {
        this.$message({
          type: 'error',
          message: '数据不完整,请重试!!'
        })
        return
      }

      if (this.lng == null || this.lng == '') {
        this.$message({
          type: 'error',
          message: '数据不完整,请重试!!'
        })
        return
      }

      if (this.lat2 == null || this.lat2 == '') {
        this.$message({
          type: 'error',
          message: '数据不完整,请重试!!'
        })
        return
      }

      if (this.lng2 == null || this.lng2 == '') {
        this.$message({
          type: 'error',
          message: '数据不完整,请重试!!'
        })
        return
      }
      this.m1 = null
      this.m2 = null
      this.map = null
      this.init()
      this.m1 = new AMap.Marker({
        map: this.map,
        draggable: false,
        position: new AMap.LngLat(this.lng, this.lat)
      })
      this.m1.setLabel({
        offset: new AMap.Pixel(20, 20),
        content: '<b>起点</b>'
      })

      this.m2 = new AMap.Marker({
        map: this.map,
        draggable: false,
        position: new AMap.LngLat(this.lng2, this.lat2)
      })
      this.m2.setLabel({
        offset: new AMap.Pixel(20, 20),
        content: '<b>终点</b>'
      })
      this.map.setFitView()

      this.line = new AMap.Polyline({
        strokeColor: '#80d8ff',
        isOutline: true,
        outlineColor: 'white'
      })
      this.line.setMap(this.map)

      this.text = new AMap.Text({
        text: '',
        style: {
          'background-color': '#29b6f6',
          'border-color': '#e1f5fe',
          'font-size': '12px'
        }
      })
      this.text.setMap(this.map)

      this.computeDis()
      this.m1.on('dragging', this.computeDis)
      this.m2.on('dragging', this.computeDis)
      // this.order.distance=this.text;
    },
    // 第一步创建地图
    init() {
      this.map = new AMap.Map('container', {
        zoom: 11, // 级别
        resizeEnable: true
      })
      AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], this.search)
      AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], this.search2)
    },

    /**
     * 计算距离
     */
    computeDis() {
      var p1 = this.m1.getPosition()
      var p2 = this.m2.getPosition()
      var textPos = p1.divideBy(2).add(p2.divideBy(2))
      var distance = Math.round(p1.distance(p2))
      var path = [p1, p2]
      this.line.setPath(path)
      this.text.setText('距离' + (distance / 1000) + '千米')
      this.order.order.distance = distance / 1000
      this.text.setPosition(textPos)
    },

    /**
     * 搜索地点
     */
    search() {
      this.autocomplete = new AMap.Autocomplete({
        input: 'tipinput'
      })
      this.placeSearch = new AMap.PlaceSearch({
        city: '北京',
        map: this.map
      })

      this.autocomplete2 = new AMap.Autocomplete({
        input: 'tipinput2'
      })
      this.placeSearch2 = new AMap.PlaceSearch({
        city: '北京',
        map: this.map
      })
      AMap.event.addListener(this.autocomplete, 'select', this.setting)
      AMap.event.addListener(this.autocomplete2, 'select', this.setting)
    },
    /**
     * 获取地点
     * @param e
     */
    setting(e) {
      // TODO 针对选中的poi实现自己的功能
      this.placeSearch.setCity(e.poi.adcode)
      this.placeSearch.search(e.poi.name)
      /**
       * 获取所有的标记进行添加点击事件
       */
      console.log('搜索中!')
      AMap.event.addListener(this.placeSearch, 'markerClick', this.getCoordinates)
    },
    /**
     * 起点点击事件
     * @param e
     */
    getCoordinates(e) {
      this.lat = e.data.location.lat
      this.lng = e.data.location.lng
      this.order.order.senderAddress = e.data.pname + '' + e.data.cityname + '' + e.data.adname + '' + e.data.address + '' + e.data.name
      this.order.orderLocation.sendLocation = this.lng + ',' + this.lat
    },

    /**
     * 以下是上面的一样的方法,是收件点的搜索
     */
    search2() {
      this.autocomplete2 = new AMap.Autocomplete({
        input: 'tipinput2'
      })
      this.placeSearch2 = new AMap.PlaceSearch({
        city: '北京',
        map: this.map
      })
      AMap.event.addListener(this.autocomplete2, 'select', this.setting2)
    },
    setting2(e) {
      // TODO 针对选中的poi实现自己的功能
      this.placeSearch2.setCity(e.poi.adcode)
      this.placeSearch2.search(e.poi.name)
      /**
       * 获取所有的标记进行添加点击事件
       */
      const markers = this.map.getAllOverlays('marker')
      AMap.event.addListener(this.placeSearch2, 'markerClick', this.getCoordinates2)
    },
    getCoordinates2(e) {
      this.lat2 = e.data.location.lat
      this.lng2 = e.data.location.lng
      this.order.order.receiverAddress = e.data.pname + '' + e.data.cityname + '' + e.data.adname + '' + e.data.address + '' + e.data.name
      this.order.orderLocation.receiveLocation = this.lng2 + ',' + this.lat2
    }
  }
}
</script>
<style scoped>

/deep/ .map-facility-img {
  width: 50px;
  height: 50px;
}
</style>

